<template>
<div class="box">
    <ul>
<li
v-for="item in resList" 
   :key="item.proid"
   @click="clickHandler"
>
{{item.proname}}</li>

    </ul>
</div>
</template>
<script setup lang="ts">
import { inject } from 'vue'
import type { MyHotItem } from '@/config/interface'
import { useRouter, type Router } from 'vue-router'
const $router: Router = useRouter()

const resList = inject<MyHotItem[]>('resList')
    const clickHandler = (e: Event) => {
  const text = (e.target as HTMLElement).innerText

  $router.push({ path: '/list', query: { search: text } })
}
</script>
<style scoped lang="scss">
li {
    height: 40px;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
  }</style>